<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户ID">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.user_keys"
                            placeholder="请输入用户ID"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="用户搜索">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.user_keys"
                            placeholder="请输入用户昵称/姓名/手机号"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.order_no"
                            placeholder="请输入备注"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>

                <el-form-item label="创建时间">
                    <daterange-picker
                            class="w-[385px]"
                            value-format="YYYY-MM-DD"
                            v-model:startTime="queryParams.created_at_start_time"
                            v-model:endTime="queryParams.created_at_end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPageNew">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-tabs class="demo-tabs" v-model="type" @tab-click="handleTabclick">
                <el-table size="large" v-loading="pager.loading" @selection-change="handleSelectionChange" :data="pager.lists" style="width: 100%">
                    <el-table-column type="selection" width="60" />
                    <el-table-column label="ID" prop="nickname" min-width="100">
                        <template #default="{ row }">
                            {{row.id}}
                        </template>
                    </el-table-column>
                    <el-table-column label="用户ID / 手机号 / 昵称" prop="name" min-width="180">
                        <template #default="{ row }">
                            {{ row.user.id }} / {{ row.user.phone }} / {{ row.user.nickname }}
                        </template>
                    </el-table-column>
                    <el-table-column label="金额信息" prop="nickname" min-width="120">
                        <template #default="{ row }">
                            <div class="flex flex-col gap-2">
                                <div>
                                    <span>操作金额：</span>
                                    <span style="color: #2494f2">{{row.price}}</span>
                                </div>
                                <div>
                                    <span>操作前金额：</span>
                                    <span style="color: #2494f2">{{row.before}}</span>
                                </div>
                                <div>
                                    <span>操作后金额：</span>
                                    <span style="color: #2494f2">{{row.after}}</span>
                                </div>
                                <div>
                                    <span>金额类型：</span>
                                    <span style="color: #2494f2">{{row.type_name}}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="name" min-width="180">
                        <template #default="{ row }">
                            {{ row.content }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="name" min-width="180">
                        <template #default="{ row }">
                            {{ row.created_at }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-tabs>
        </el-card>
        <!--        <CutPop v-if="showCutPop" ref="editRef" @close="closePop"></CutPop>-->
        <MoneyPop v-if="showMoneyPop" ref="showMoneyRef" @close="closeMoneyPop"></MoneyPop>
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import cache from '@/utils/cache'
    import router, { getRoutePath } from '@/router'
    const route = useRoute()
    import feedback from "@/utils/feedback";
    import { getIncomePageList } from '@/api/teamhead'

    console.log(route.query)
    const queryParams = reactive({
        uuid: route.query.id,
        user_keys: '',
        order_no: '',
        created_at: '',  // 下单时间  格式：2024-09-02 - 2024-10-02-搜索
        created_at_start_time: '',  // 下单时间  格式：2024-09-02 - 2024-10-02-搜索
        created_at_end_time: '',  // 下单时间  格式：2024-09-02 - 2024-10-02-搜索
        export: false
    });

    const { pager, getLists, resetPage, resetParams } = usePaging({
        fetchFun: getIncomePageList,
        params: queryParams
    });

    getLists();


    const resetPageNew = () => {
        queryParams.created_at = queryParams.created_at_end_time ? `${queryParams.created_at_start_time} - ${queryParams.created_at_end_time}` : null;
        getLists()
    }
</script>
